<template>
  <div class="goodList">
    <!--    <el-form ref="formValidate" :model="formValidate" label-width="80px" label-position="right" inline class="tabform">-->
    <!--      <el-form-item label="商品分类：" v-if="!liveStatus">-->
    <!--        <el-cascader-->
    <!--          v-model="formValidate.cate_id"-->
    <!--          size="small"-->
    <!--          :options="treeSelect"-->
    <!--          :props="{ checkStrictly: true, emitPath: false }"-->
    <!--          clearable-->
    <!--          class="form_content_width"-->
    <!--        ></el-cascader>-->
    <!--      </el-form-item>-->
    <!--      <el-form-item label="商品类型：" v-if="!type && diy">-->
    <!--        <el-select v-model="goodType" clearable @change="userSearchs" class="form_content_width">-->
    <!--          <el-option v-for="item in goodList" :value="item.activeValue" :key="item.activeValue" :label="item.title">-->
    <!--          </el-option>-->
    <!--        </el-select>-->
    <!--      </el-form-item>-->
    <!--      <el-form-item label="商品搜索：">-->
    <!--        <el-input-->
    <!--          clearable-->
    <!--          placeholder="请输入商品名称/关键字/编号"-->
    <!--          v-model="formValidate.store_name"-->
    <!--          class="form_content_width"-->
    <!--        />-->
    <!--        <el-button type="primary" @click="userSearchs" class="ml15">查询</el-button>-->
    <!--      </el-form-item>-->
    <!--    </el-form>-->
    <el-table
      ref="table"
      empty-text="暂无数据"
      max-height="400"
      :highlight-current-row="many !== 'many'"
      :data="tableList"
      v-loading="loading"
      @select="changeCheckbox"
      @select-all="changeCheckbox"
    >
      <el-table-column v-if="many == 'many'" type="selection" width="55"></el-table-column>
      <el-table-column v-else width="100">
        <template slot-scope="scope">
          <el-radio v-model="associatedId" :label="scope.row.id" @change.native="getTemplate(scope.row)"
          >&nbsp;
          </el-radio
          >
        </template>
      </el-table-column>

      <el-table-column label="ID" width="100">
        <template slot-scope="scope">
          <span>{{ scope.row.id }}</span>
        </template>
      </el-table-column>

      <el-table-column label="医生姓名" width="150">
        <template slot-scope="scope">
          <span>{{ scope.row.doctor.name }}</span>
        </template>
      </el-table-column>

      <el-table-column label="头像" width="150">
        <template slot-scope="scope">
          <div class="tabBox_img" v-viewer>
            <img v-lazy="scope.row.doctor.avatar" />
          </div>
        </template>
      </el-table-column>
      <el-table-column label="服务标题" width="330">
        <template slot-scope="scope">
          <span>{{ scope.row.service.title }}</span>
        </template>
      </el-table-column>
      <el-table-column label="封面图" width="100">
        <template slot-scope="scope">
          <div class="tabBox_img" v-viewer>
            <img v-lazy="scope.row.service.cover" />
          </div>
        </template>
      </el-table-column>
    </el-table>
    <div class="acea-row row-right page">
      <pagination
        v-if="total"
        :total="total"
        :page.sync="formValidate.page"
        :limit.sync="formValidate.limit"
        @pagination="productList"
      />
      <el-button type="primary" @click="addAssociated" class="ml15">添加关联</el-button>
      <el-button type="info" @click="cancelAssociated" class="ml15">取消关联</el-button>
      <!--      <el-button type="primary" @click="ok" v-if="many === 'many' && !diy" class="ml15">提交</el-button>-->
    </div>
    <el-dialog :visible.sync="modalss" :title="addedTitle" :close-on-click-modal="false" width="75%" append-to-body>
      <el-table
        ref="table"
        empty-text="暂无数据"
        max-height="600"
        :highlight-current-row="many !== 'many'"
        :data="doctorList"
        v-loading="loading"
        @select="changeCheckbox"
        @select-all="changeCheckbox"
      >
        <!--        <el-table-column v-if="many == 'many'" type="selection" width="55"> </el-table-column>-->
        <el-table-column width="50">
          <template slot-scope="scope">
            <el-radio v-model="templateRadio" :label="scope.row.id" @change.native="getTemplateRow(scope.row)"
            >&nbsp;
            </el-radio
            >
          </template>
        </el-table-column>
        <el-table-column label="ID" width="80">
          <template slot-scope="scope">
            <span>{{ scope.row.id }}</span>
          </template>
        </el-table-column>
        <el-table-column label="科室" width="100" v-if="type === 0">
          <template slot-scope="scope">
            <span>{{ scope.row.cate_name }}</span>
          </template>
        </el-table-column>
        <el-table-column label="头像" width="80" v-if="type === 0">
          <template slot-scope="scope">
            <div class="tabBox_img" v-viewer>
              <img v-lazy="scope.row.avatar" />
            </div>
          </template>
        </el-table-column>

        <el-table-column label="头像" width="80" v-if="type === 1">
          <template slot-scope="scope">
            <div class="tabBox_img" v-viewer>
              <img v-lazy="scope.row.cover" />
            </div>
          </template>
        </el-table-column>
        <el-table-column label="标题" min-width="100" v-if="type === 1">
          <template slot-scope="scope">
            <span>{{ scope.row.title }}</span>
          </template>
        </el-table-column>

        <el-table-column label="价格" width="100" v-if="type === 1">
          <template slot-scope="scope">
            <span>{{ scope.row.price }}</span>
          </template>
        </el-table-column>

        <el-table-column label="库存" width="100" v-if="type === 1">
          <template slot-scope="scope">
            <span>{{ scope.row.stock }}</span>
          </template>
        </el-table-column>

        <el-table-column label="使用次数" width="100" v-if="type === 1">
          <template slot-scope="scope">
            <span>{{ scope.row.frequency_of_use }}</span>
          </template>
        </el-table-column>

        <el-table-column label="医生姓名" min-width="100" v-if="type === 0">
          <template slot-scope="scope">
            <span>{{ scope.row.name }}</span>
          </template>
        </el-table-column>
        <el-table-column label="医生简介" min-width="150" v-if="type === 0">
          <template slot-scope="scope">
            <span>{{ scope.row.profile }}</span>
          </template>
        </el-table-column>
        <el-table-column label="特长" min-width="130" v-if="type === 0">
          <template slot-scope="scope">
            <span>{{ scope.row.specialty }}</span>
          </template>
        </el-table-column>
        <el-table-column label="荣誉" min-width="130" v-if="type === 0">
          <template slot-scope="scope">
            <span>{{ scope.row.contribution }}</span>
          </template>
        </el-table-column>
        <el-table-column label="状态" min-width="80">
          <template slot-scope="scope">
            <span v-if="scope.row.status === 1">已上架</span>
            <span v-if="scope.row.status === 0">未上架</span>
          </template>
        </el-table-column>
        <el-table-column label="时间" min-width="110">
          <template slot-scope="scope">
            <span>{{ scope.row.add_time }}</span>
          </template>
        </el-table-column>
      </el-table>
      <div class="acea-row row-right page">
        <pagination
          v-if="totals"
          :total="totals"
          :page.sync="artFrom.page"
          :limit.sync="artFrom.limit"
          @pagination="getDoctorList"
        />
        <el-button type="primary" @click="determine" class="ml15">确定</el-button>
        <el-button type="info" @click="modalss=false" class="ml15">关闭</el-button>
      </div>
    </el-dialog>

  </div>
</template>

<script>
import { mapState } from "vuex";
import { cascaderListApi, changeListApi } from "@/api/product";
import {
  serviceRelationListApi,
  serviceRelationApi,
  doctorListApi,
  doctorTypeListApi,
  serviceDelRelationApi,
  serviceListApi
} from "@api/service_information";

import { liveGoods } from "@/api/live";
import { getProductList } from "@/api/diy";

export default {
  name: "index",
  props: {
    Id: {
      type: Number,
      default: ""
    },
    type: {
      type: Number,
      default: 0
    },
    diy: {
      type: Boolean,
      default: false
    },
    ischeckbox: {
      type: Boolean,
      default: false
    },
    liveStatus: {
      type: Boolean,
      default: false
    },
    isLive: {
      type: Boolean,
      default: false
    },
    isdiy: {
      type: Boolean,
      default: false
    },
    selectIds: {
      type: Array,
      default: () => {
        return [];
      }
    },
    datas: {
      type: Object,
      default: function() {
        return {};
      }
    }
  },
  data() {
    return {
      templateRadio: null,
      modal_loading: false,
      treeSelect: [],
      doctorId: "",
      addedTitle:'',
      typeList: [], // 分类列表
      associatedId: "", //  要取消已关联的服务id
      formValidate: {
        page: 1,
        limit: 12,
        service_id: "", //  服务id
        doctor_id: "" //  医生id
      },
      doctorList: [],
      total: 0,
      totals: 0,
      modalss: false,
      loading: false,
      artFrom: {
        page: 1,
        limit: 12
      },
      grid: {
        xl: 10,
        lg: 10,
        md: 12,
        sm: 24,
        xs: 24
      },
      tableList: [],
      currentid: 0,
      productRow: {},
      images: [],
      many: "",
      goodType: ""
    };
  },
  computed: {},
  watch: {
    Id(newVal, oldVal){
      this.tableList=[]
      this.formValidate.page=1
      if(this.type === 0){
        this.formValidate.service_id = newVal;
        // this.formValidate.doctor_id = '';

      }else if(this.type === 1){
        this.formValidate.doctor_id = newVal;
        // this.formValidate.service_id = '';

      }
      this.productList();
    }
    // ischeckbox: {
    //   handler(newVal, oldVal) {
    //     if (newVal) {
    //       this.many = "many";
    //     }
    //   },
    //   immediate: true
    // }
  },
  created() {
    console.log("刚进来", this.type, this.Id);
    this.getCategoryList();
    if (this.type === 0) {
      // 服务关联
      this.addedTitle='添加关联医生信息'
      this.formValidate.service_id = this.Id;
      // console.log("服务关联", this.formValidate.service_id);
    } else if (this.type === 1) {
      // 医生关联
      // console.log("医生关联", this.formValidate.service_id);
      this.addedTitle='添加关联服务信息'
      this.formValidate.doctor_id = this.Id;
    }
    let many = "";
    if (this.ischeckbox) {
      many = "many";
    } else {
      many = this.$route.query.type;
    }
    this.many = many;
  },
  mounted() {
    // this.goodsCategory();
      this.productList();
  },
  methods: {
    productList() {
      if (this.type === 0) {
        this.formValidate.doctor_id = "";

      } else if (this.type === 1) {
        this.formValidate.service_id = "";
      }
      let data = {
        page: this.formValidate.page,
        limit: this.formValidate.limit,
        service_id: this.formValidate.service_id, //  服务id
        doctor_id: this.formValidate.doctor_id   //  医生id
      };
      console.log(data, "关联数据");
      this.loading = true;
      serviceRelationListApi(data)
        .then((res) => {
          console.log(res, "弹窗数据");
          let data = res.data;
          this.tableList = data.list;
          this.total = res.data.count;
          this.loading = false;
        })
        .catch((res) => {
          this.loading = false;
          this.$message.error(res.msg);
        });
    },
    getTemplateRow(row) {
      console.log(row, "当前选中");
      // if(this.type === 0){
      //   this.doctorId = row.id;
      // }else if (this.type === 1){
      //
      // }
    },
    getTemplate(row) {
      this.associatedId = row.id;
      // console.log(row,this.associatedId);
    },
    changeCheckbox(selection) {
      console.log('全选和单选');
      let images = [];
      selection.forEach(function(item) {
        let imageObject = {
          image: item.image,
          product_id: item.id,
          store_name: item.store_name,
          temp_id: item.temp_id
        };
        images.push(imageObject);
      });

      this.images = images;
      this.diyVal = selection;
      this.$emit("getProductDiy", selection);
    },
    // 商品分类；
    // goodsCategory() {
    //   cascaderListApi(1)
    //     .then((res) => {
    //       this.treeSelect = res.data;
    //     })
    //     .catch((res) => {
    //       this.$message.error(res.msg);
    //     });
    // },
    // 列表
    // getList(res) {
    //   this.loading = true;
      // console.log(res, "dfkdhfjdh");
      // console.log(this.formValidate, "参数", this.type);
      // if (this.type === 0) {
      //   this.formValidate.doctor_id = "";
      //
      // } else if (this.type === 1) {
      //   this.formValidate.service_id = "";
      // }
      // if (!this.liveStatus) {
      //   this.getServiceRelationList();
      // }
    // },
    //  获取已关联的列表
    // getServiceRelationList() {
    //   serviceRelationListApi(this.formValidate)
    //     .then(async (res) => {
    //       let data = res.data;
    //       console.log(res, "列表列表列表");
    //       this.tableList = data.list;
    //       this.total = res.data.count;
    //       this.loading = false;
          // this.$nextTick(() => {
          //   if (this.selectIds.length) {
          //     let arr = [];
          //     this.selectIds.map((item) => {
          //       data.list.map((i) => {
          //         if (i.id == item) {
          //           console.log(i);
          //           this.$refs.table.toggleRowSelection(i, true);
          //           arr.push(i);
          //         }
          //       });
          //     });
          //     this.changeCheckbox(arr);
          //   }
          // });
    //     })
    //     .catch((res) => {
    //       this.loading = false;
    //       this.$message.error(res.msg);
    //     });
    // },

    //  获取医生类型列表
    getCategoryList() {
      doctorTypeListApi({ page: 1, limit: 100 }).then(res => {
        // console.log(res.data.list, "医生类型列表");
        this.typeList = res.data.list;
      });
    },


    //  获取医生信息列表 or 服务信息列表
    getDoctorList() {
      if (this.type === 0) {
        doctorListApi(this.artFrom).then(res => {
          this.doctorList = res.data.list;
          this.totals = res.data.count;
          this.doctorList.forEach(item => {
            const doctorType = this.typeList.find(item1 => item1.id === item.cate_id);
            if (doctorType) {
              item.cate_name = doctorType.title;
            }
          });
        });
      } else if (this.type === 1) {
        serviceListApi(this.artFrom).then(res => {
          this.doctorList = res.data.list;
          this.totals = res.data.count;
          this.doctorList.forEach(item => {
            const doctorType = this.typeList.find(item1 => item1.id === item.cate_id);
            if (doctorType) {
              item.cate_name = doctorType.title;
            }
          });

        });
      }
    },
    //添加关联
    addAssociated() {
      this.modalss = true;
      this.getDoctorList();
    },
    //  取消关联
    cancelAssociated() {
      if(this.tableList.length === 0){
       this.$message.error("无已关联服务");
        setTimeout(()=>{
          this.$emit('closePop')
        },500)
      }else {
        if (this.associatedId === "") return this.$message.error("请选择要取消关联的服务");
        serviceDelRelationApi(this.associatedId).then(res => {
          this.$message.success(res.msg);
          this.tableList = [];
          this.productList();
          this.associatedId = "";
        });
      }
    },
    //  确定关联
    determine() {
      if(this.type === 0){
        if (this.templateRadio === null) return this.$message.error("请选择医生");
        // this.formValidate.service_id = "";
        this.formValidate.doctor_id = this.templateRadio;
      }else if (this.type === 1){
        if (this.templateRadio === null) return this.$message.error("请选择服务");
        // this.formValidate.doctor_id = "";
        this.formValidate.service_id = this.templateRadio;
      }
      let data = {
        service_id: this.formValidate.service_id,
        doctor_id: this.formValidate.doctor_id
      };
      console.log(data, "关联数据",this.type);
      serviceRelationApi(data).then(res => {
        this.$message.success("添加关联成功", res);
        this.tableList = [];
        this.modalss = false;
        this.templateRadio=null
        this.productList();
      });
    },


    // 表格搜索
    userSearchs() {
      this.currentid = 0;
      this.productRow = {};
      this.formValidate.page = 1;
      if (this.diy) {
        this.productList();
      } else {
        this.productList();
      }
    },
    clear() {
      this.productRow.id = "";
      this.currentid = "";
    }
  }
};
</script>

<style scoped lang="stylus">
.footer {
  margin: 15px 0;
}

.tabBox_img {
  width: 36px;
  height: 36px;
  border-radius: 4px;
  cursor: pointer;

  img {
    width: 100%;
    height: 100%;
  }
}

.tabform {
  ::v-deep .ivu-form-item {
    margin-bottom: 16px !important;
  }
}

.btn {
  margin-top: 20px;
  float: right;
}

.goodList {
  ::v-deeptable {
    width: 100% !important;
  }
}

.determine {
  width: 100%;
  //border: 1px solid red;
  text-align: right;
  box-sizing: border-box;
  padding: 10px 30px 0 0;
}
</style>
